<template>
    <div class="divBox">
      <div class="card">
        <div class="titlebar">
          <div class="container">
            <a class="text">供应量</a>
            <a class="subtext">上月({{ monthSupply.statDate }})</a>
          </div>
        </div>
        <div class="el-card-bg" :bordered="false" dis-hover>
          <div class="content-container">
            <div class="content-pannel">
              <div class="content-container-left">
                <img class="flag-icon" src="@/assets/imgs/icon_capital_one.png" />
                <span class="sumAmout">{{ monthSupply.carbonSupply }}</span>
                <span class="unit">{{ assetsIncomeUnit }}</span>
              </div>
            </div>
            <div class="p-diliver" />
            <div class="content-container-right">
              <div class="content-pannel">
                <div class="rate-bar">
                  <div class="rate-container">
                    <span class="hint">碳信用：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSupply.carbonCredit }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonCreditUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">碳配额：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSupply.carbonQuota }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonQuotaUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">绿&nbsp;&nbsp;&nbsp;证：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSupply.greenScore }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ greenCertUnit }}</i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <el-divider class="diliver"></el-divider>
  
          <div class="bottom-bar">
            <div class="bottom-content-container">
              <div class="bottom-hint">总供应量：</div>
              <div class="bottom-value">{{
                monthSupply.carbonSupplyTotal
              }}</div>
              <div class="bottom-value">&nbsp;{{ assetsIncomeUnit }}</div>
            </div>
            <div class="empty-div" />
            <div class="bottom-content-container">
              <div class="bottom-hint">碳资产估值：</div>
              <div class="bottom-value">¥{{ monthSupply.carbonValuation }}</div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="card">
        <div class="titlebar">
          <div class="container">
            <a class="text">开发量</a>
            <a class="subtext">上月({{ monthDevelopment.statDate }})</a>
          </div>
        </div>
        <div class="el-card-bg" :bordered="false" dis-hover>
          <div class="content-container">
            <div class="content-pannel">
              <div class="content-container-left">
                <img class="flag-icon" src="@/assets/imgs/icon_capital_two.png" />
                <span class="sumAmout">{{ monthDevelopment.carbonSupply }}</span>
                <span class="unit">{{ assetsIncomeUnit }}</span>
              </div>
            </div>
            <div class="p-diliver" />
            <div class="content-container-right">
              <div class="content-pannel">
                <div class="rate-bar">
                  <div class="rate-container">
                    <span class="hint">碳信用：</span>
                    <div class="rate">
                      <i :class="sumincome">{{
                        monthDevelopment.carbonCredit
                      }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonCreditUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">碳配额：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthDevelopment.carbonQuota }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonQuotaUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">绿&nbsp;&nbsp;&nbsp;证：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthDevelopment.greenScore }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ greenCertUnit }}</i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <el-divider class="diliver"></el-divider>
  
          <div class="bottom-bar">
            <div class="bottom-content-container">
              <span class="bottom-hint">总供应量：</span>
              <span class="bottom-value">{{
                monthDevelopment.carbonSupplyTotal
              }}</span>
              <span class="bottom-value">&nbsp;{{ assetsIncomeUnit }}</span>
            </div>
            <div class="empty-div" />
            <div class="bottom-content-container">
              <span class="bottom-hint">碳资产估值：</span>
              <span class="bottom-value"
                >¥ {{ monthDevelopment.carbonValuation }}</span
              >
            </div>
          </div>
        </div>
      </div>
  
      <div class="card">
        <div class="titlebar">
          <div class="container">
            <a class="text">销售量</a>
            <a class="subtext">上月({{ monthSales.statDate }})</a>
          </div>
        </div>
        <div class="el-card-bg" :bordered="false" dis-hover>
          <div class="content-container">
            <div class="content-pannel">
              <div class="content-container-left">
                <img
                  class="flag-icon"
                  src="@/assets/imgs/icon_capital_three.png"
                />
                <span class="sumAmout">{{ monthSales.carbonSupply }}</span>
                <span class="unit">{{ assetsIncomeUnit }}</span>
              </div>
            </div>
            <div class="p-diliver" />
            <div class="content-container-right">
              <div class="content-pannel">
                <div class="rate-bar">
                  <div class="rate-container">
                    <span class="hint">碳信用：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSales.carbonCredit }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonCreditUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">碳配额：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSales.carbonQuota }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ carbonQuotaUnit }}</i>
                    </div>
                  </div>
                  <div class="rate-container">
                    <span class="hint">绿&nbsp;&nbsp;&nbsp;证：</span>
                    <div class="rate">
                      <i :class="sumincome">{{ monthSales.greenScore }}</i>
                      <i :class="sumAmoutUnit">&nbsp;{{ greenCertUnit }}</i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-divider class="diliver"></el-divider>
          <div class="bottom-bar">
            <div class="bottom-content-container">
              <span class="bottom-hint">总供应量：</span>
              <span class="bottom-value">{{ monthSales.carbonSupplyTotal }}</span>
              <span class="bottom-value">&nbsp;{{ assetsIncomeUnit }}</span>
            </div>
            <div class="empty-div" />
            <div class="bottom-content-container">
              <span class="bottom-hint">碳资产估值：</span>
              <span class="bottom-value">¥ {{ monthSales.carbonValuation }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { greenUnit, creditUnit, qoutaUnit, cncUnit } from "@/config/ComConfig";
  export default {
    name: "companyPackage",
    data() {
      return {
        lastMonth: "2月",
        assetsIncomeUnit: cncUnit,
        carbonCreditUnit: creditUnit,
        carbonQuotaUnit: qoutaUnit,
        greenCertUnit: greenUnit,
      };
    },
    props: {
      monthSupply: {},
      monthDevelopment: {},
      monthSales: {},
    },
    mounted() {},
    methods: {
      sumAmoutUnit() {
        return "sumAmoutUnit";
      },
      sumincome() {
        return "sumincome";
      },
    },
    created() {},
  };
  </script>
  <style lang="scss" scoped>
  .divBox {
    display: flex;
    flex-direction: row;
    display: grid;
    grid: auto / auto auto auto;
    grid-gap: 20px;
  }
  .card {
    display: flex;
    flex-direction: column;
  }
  .el-card-bg {
    background: white;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom: 10px;
    border-radius: 6px;
    // background-image: url('../../../assets/imgs/bg_card.png');
    // background-size:cover;
  }
  .el-divider--horizontal {
    margin: 15px 0 10px 0;
  }
  .titlebar {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    .container {
      display: flex;
      flex-direction: row;
      // flex-grow: 1;
    }
    .text {
      height: 18px;
      
      
      font-weight: 500;
      color: #080b0d;
      
      cursor: default;
    }
    .subtext {
      margin-top: 4px;
      margin-left: 6px;
      height: 14px;
      
      
      font-weight: 500;
      color: #5e6c84;
      
      cursor:default;
    }
  }
  .content-container-right {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    // flex-flow: 2;
  }
  .content-container-left {
    display: flex;
    flex-direction: row;
    margin: auto;
    // flex-flow: 3;
  }
  .content-container {
    display: flex;
    flex-direction: row;
    .content-pannel {
      display: flex;
      flex-direction: column;
      vertical-align: middle;
      .flag-icon {
        vertical-align: middle;
      }
      .sumAmout {
        vertical-align: middle;
        margin-left: 6px;
        
        
        font-weight: 500;
        color: #24a776;
      }
      .unit {
        margin-left: 2px;
        // margin-right: 24px;
        margin-top: 15px;
        vertical-align: bottom;
        
        
        font-weight: 400;
        color: #24a776;
        
      }
      .rate-bar {
        display: flex;
        flex-direction: column;
      }
      .rate-container {
        display: flex;
        flex-direction: row;
        margin-top: 9px;
        // margin-right: 22px;
        .hint {
          
          
          font-weight: 400;
          color: #5e6c84;
        }
        .rate {
          display: flex;
          flex-direction: row;
          margin-left: 6px;
          min-width: 28px;
          height: 16px;
          
          
          font-weight: 500;
          
        }
        .sumincome {
          
          
          font-weight: 500;
          color: #424c5c;
        }
        .sumAmoutUnit {
          
          
          font-weight: 500;
          color: #424c5c;
        }
      }
    }
    .diliver {
      width: 100%;
      height: 1px;
      border: 1px solid rgba(238, 240, 243, 0.95);
    }
    .p-diliver {
      margin-left: 10px;
      margin-right: 10px;
      width: 1px;
      height: 70px;
      border: 1px #eef0f3;
      border-style: dotted solid double dashed;
    }
  }
  .bottom-bar {
    // width: 100%;
    display: flex;
    flex-direction: row;
    .bottom-content-container {
      display: flex;
      flex-direction: row;
      // flex-grow: 1;
    }
    .bottom-hint {
      // height: 14px;
      
      
      font-weight: 400;
      color: #424c5c;
      
    }
    .bottom-value {
      // margin-left: 6px;
      // height: 17px;
      
      
      font-weight: 500;
      color: #27a777;
      
      // 
    }
  }
  .empty-div {
    flex-grow: 1;
  }
  </style>